<template>
    <view class="content">
        <view class="input-group">
            <view class="input-row border">
                <text class="title">账号：</text>
                <m-input type="text" focus clearable v-model="account" placeholder="请输入账号"></m-input>
            </view>
            <view class="input-row border">
                <text class="title">密码：</text>
                <m-input type="password" displayable v-model="password" placeholder="请输入密码"></m-input>
            </view>
            <view class="input-row">
                <text class="title">邮箱：</text>
                <m-input type="text" clearable v-model="email" placeholder="请输入邮箱"></m-input>
            </view>
        </view>
		<view class="uni-list" v-if="userInfo.grade ==3">
			<view class="uni-list-cell uni-list-cell-pd">
				<view class="uni-list-cell-db">设为管理员</view>
				<switch :checked="grade==2" @change="switch1Change"/>
			</view>
		</view>
        <view class="btn-row">
            <button type="primary" class="an-btn-yuan an-Gradients" @tap="register">提交</button>
        </view>
    </view>
</template>

<script>
    import mInput from '../../components/m-input.vue';
	import md5 from '../../common/md5.js'
	import {isEmpty} from '../../common/graceChecker.js'
	import {mapState} from 'vuex'
    export default {
        components: {
            mInput
        },
		computed: {
		    ...mapState(['userInfo'])
		},
        data() {
            return {
                account: '',
                password: '',
                email: '',
				grade: 1,	// 1普通用户  2 管理员
				defaultData:{}
            }
        },
		onLoad(e) {
			if(!isEmpty(e)){
				try{
					this.defaultData = JSON.parse(decodeURIComponent(e.detailDate));
				}catch(err){
					this.defaultData = JSON.parse(e.detailDate); // 防止URl解码报错
				}
				uni.setNavigationBarTitle({
					title: '修改用户'
				})
				this.account = this.defaultData.name
				this.email = this.defaultData.email
				this.grade = this.defaultData.grade
			}
		},
        methods: {
			switch1Change(e) {
				if(e.target.value){
					this.grade = 2
				}else{
					this.grade = 1
				}
			},
            register() {
                /**
                 * 客户端对账号信息进行一些必要的校验。
                 * 实际开发中，根据业务需要进行处理，这里仅做示例。
                 */
                if (this.account.length < 5) {
                    uni.showToast({
                        icon: 'none',
                        title: '账号最短为 5 个字符'
                    });
                    return;
                }
                if (this.password.length < 6) {
                    uni.showToast({
                        icon: 'none',
                        title: '密码最短为 6 个字符'
                    });
                    return;
                }
                if (this.email.length < 3 || !~this.email.indexOf('@')) {
                    uni.showToast({
                        icon: 'none',
                        title: '邮箱地址不合法'
                    });
                    return;
                }

                let nd = {
                    name: this.account,
                    password: md5(this.password),
                    email: this.email,
					grade: this.grade
                }
				if(!isEmpty(this.defaultData)){	// 修改
					nd.id = this.defaultData.id
				}
				this.$api.editUser(nd).then((res)=>{
					if(res.code != 0){
						this.clearData()
						uni.showToast({
						    title: '操作成功'
						});
						setTimeout(()=>{
							uni.navigateBack({
							    delta: 1
							});
						},1000)
					}
				})
            },
			
			clearData(){
				this.account = ''
				this.password = ''
			}
        }
    }
</script>

<style scoped>
.content{
	padding: 0;
}
</style>
